<template>
  <view class="center_container">
    <view class="content">
      <view class="up">
        <view class="item">
          <view class="left">手机号码</view>
          <view class="right">{{ phone || '暂无信息' }}</view>
        </view>
        <view class="item" @click="goEditPwd">
          <view class="left">修改密码</view>
          <view class="right"><uni-icons type="forward" size="15" color="#feb51d"></uni-icons></view>
        </view>
        <view class="item" v-if="userInfo.role === 'employee'">
          <view class="left">人员状态</view>
          <uni-data-select :clear="false" v-model="value" :localdata="range" @change="change"></uni-data-select>
        </view>
      </view>
      <view class="dwon up">
        <view class="item">
          <view class="left">用户协议</view>
          <view class="right"><uni-icons type="forward" size="15" color="#feb51d"></uni-icons></view>
        </view>
        <view class="item">
          <view class="left">隐私政策</view>
          <view class="right"><uni-icons type="forward" size="15" color="#feb51d"></uni-icons></view>
        </view>
        <view class="item">
          <view class="left">服务监督协议</view>
          <view class="right"><uni-icons type="forward" size="15" color="#feb51d"></uni-icons></view>
        </view>
      </view>
      <view class="logout" style="width:100%; margin-top: 40rpx; height: 40rpx;">
        <button style="height: 100rpx; line-height: 100rpx; background-color: #ff5c0a; color: #fff;" @click="logout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { updateRepairStateAPI } from '@/api/authenticationApi.js';
import { getUserInfoAPI } from '@/api/user.js';
export default {
  data() {
    return {
      userInfo: {},
      phone: '',
      value: 'ON',
      range: [{ value: 'ON', text: '空闲中' }, { value: 'OFF', text: '已下线' }]
    };
  },
  methods: {
    async getUserInfo() {
      const res = await getUserInfoAPI();
      // this.value = res1.data..data.user.stateEnum
      this.userInfo = res.data.data;
      console.log('>>', res);
      this.value = this.userInfo.user.stateEnum;
      this.phone = this.formdataPhone(this.userInfo.user.phone);
    },
    async change(v) {
      console.log(v);
      try {
        const res = await updateRepairStateAPI(v);
        this.getUserInfo();
        setTimeout(async () => {
          uni.showToast({
            title: res.data.message,
            icon: 'success'
          });
        }, 10);
      } catch (e) {
        //TODO handle the exception
      }
    },
    formdataPhone(value) {
      if (!value) return '';
      let str = value.toString();
      return str.substring(0, 3) + '****' + str.substring(7);
    },
    goEditPwd() {
      uni.navigateTo({
        url: '/pages/forget/forget'
      });
    },
    logout() {
      console.log('>');
      try {
        uni.removeStorageSync('userData');
        uni.removeStorageSync('token');
        uni.navigateTo({
          url: '/pages/login/login'
        });
        uni.showToast({
          title: '退出登录'
        });
      } catch (e) {
        //TODO handle the exception
      }
    }
  },
  onLoad() {
    // this.userInfo = uni.getStorageSync('userData');
    // console.log('user', this.userInfo);
    this.getUserInfo();
    // // this.value = this.userInfo.user.stateEnum;
    // // console.log('>>', this.value);
    // this.phone = this.formdataPhone(this.userInfo.user.phone);
  }
};
</script>

<style lang="scss">
.center_container {
  display: flex;
  background-color: #333333;
  height: 100vh;
  .content {
    margin: 0 auto;
    width: 86%;
    margin-top: 30rpx;
    .up {
      background: #4f4f4f;
      border-radius: 5px;
      padding-bottom: 0rpx;
      padding-top: 10rpx;
      padding-right: 0;

      ::v-deep .item {
        color: #feb51d;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #bbb;
        padding: 30rpx 0;
        padding-left: 20rpx;
        .uni-select {
          border: unset;
          .uni-select__selector {
            background-color: #4f4f4f;
            border: unset;
          }
          .uni-popper__arrow {
            left: unset;
            display: none;
            right: 10%;
            &::after {
              top: 0;
              border-bottom-color: #4f4f4f;
            }
          }
          .uni-select__input-box {
            align-items: unset;
            justify-content: flex-end;
            color: #feb51d;
            .uni-select__input-text {
              width: unset;
              color: #feb51d;
              font-size: 16px !important;
              padding-right: 20rpx;
            }
            .uni-icons {
              color: #feb51d !important;
              font-size: 16px !important;
            }
          }
        }
        // font-size: rpx;
        &:last-child {
          border: unset;
          padding-bottom: 16rpx;
        }
        .right {
          padding-right: 13rpx;
        }
      }
    }
    .dwon {
      margin-top: 40px;
      .item {
        &:last-child {
          border: unset;
          padding-bottom: 26rpx;
        }
      }
    }
  }
}
</style>
